<script setup>
import { ref } from 'vue'
let props = defineProps(['isCollapse'])
let emits = defineEmits(['collapseEvent'])

let ic = ref(props.isCollapse);

function collapseFn() {
    ic.value = !ic.value
    // 通知父组件，菜单收起情况
    emits('collapseEvent', ic.value)
}

</script>
<template>
    <!-- 页头 -->
    <el-page-header @back="goBack">
        <template #icon>
            <div class="logo">
                <i class="icon iconfont icon-jianyue-xiangyun"></i>
                <span>云端中国城</span>
            </div>
        </template>
        <template #title>
            <i :class="[ic ? 'iconfont icon-caidanzhankai' : 'iconfont icon-caidanshouqi']" @click="collapseFn"></i>
        </template>
        <template #content>
            <span class="text-large font-600 mr-3"> 云端中国城后台管理系统 </span>
        </template>
        <!-- <template #breadcrumb>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: './page-header.html' }">
                    管理系统
                </el-breadcrumb-item>
                <el-breadcrumb-item><a href="./page-header.html">设置页面</a></el-breadcrumb-item>
                <el-breadcrumb-item>网站设置</el-breadcrumb-item>
            </el-breadcrumb>
        </template> -->
    </el-page-header>
</template>
<style scoped>
@import url('../assets/iconfont.css');

.el-page-header {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.logo {
    width: 280px;
    height: 60px;
    color: white;
    letter-spacing: 5px;
    font-size: 22px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: black;
    margin-left: -20px;
    padding-left: 30px;
}

.logo i {
    color: yellow;
    margin-right: 10px;
}
</style>